<template>
    <div v-if="type == 'gray'" class="button-gray" style="display: inline-block;height: 32px;min-width: 108px;">
        <div
            style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;padding: 4px 12px;">
            <slot></slot>
        </div>
    </div>
    <div v-else class="button-normal" style="display: inline-block;height: 32px;min-width: 108px;">
        <div
            style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;padding: 4px 12px;">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
    type: {
        type: String,
        default: 'normal'
    }
})

onMounted(async () => {

})
</script>

<style scoped>
.button-gray {
    background-color: #cccccc;
    color: black;
    cursor: pointer;
}

.button-gray:hover {
    background-color: #b2b2b2;
}

.button-gray:active {
    scale: 0.98
}

.button-normal {
    background-color: #0067b8;
    cursor: pointer;
    color: white;
    user-select: none;
}

.button-normal:hover {
    background-color: #005da6;
}

.button-normal:active {
    scale: 0.98;
}
</style>